<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/11/3
  Time: 14:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>

</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md3">
            <div id="tree1"></div>
        </div>
        <div class="layui-col-md9">

            <button class="layui-btn layui-btn-warm layui-btn-radius" id="btn_add">增加</button>
            <button class="layui-btn layui-btn-warm layui-btn-radius" id="btn_del">删除</button>
            <table id="itemTable"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['tree','table'],function () {
        var tree=layui.tree;
        var table=layui.table;
        //3.初始化表格
        //1.初始化table分页显示数据
        var tabIns=table.render({
            elem : '#itemTable',
            url : 'item/list',
            page: true,
            limit:10,
            limits:[10,15,20],
            cols:[[
                {field: 'id', title: '编号', width: 177},
                {field: 'cid', title: '分类编号 ', width: 177},
                {field: 'title', title: '名称', width: 177},
                {field: 'sellPoint', title: '卖点', width: 177},
                {field: 'price', title: '价格', width: 177},
                {field: 'num', title: '数量', width: 177},
                {field: 'barcode', title: '条码', width: 177}
            ]]
        });

        //1.显示树节点,没有数据源
        var treeInst= tree.render({
            elem:'#tree1',
            data:[],
            click: function(obj) {
                //是商品分类的编号
                var id=obj.data.id;
                tabIns.reload({//emp/list?page=1&limit=3
                    page:true,//currentPage:1
                    method:'post',
                    where:{
                       cid:id
                    }
                });
            }
        });
        //2.向服务器发请求取原始数据{id,title,pid}
        $.ajax({
            url:'itemCat/list',
            type:'post',
            dataType:'json',
            success:function (resp) {//[{id:101,title:'abc',pid:0]
                fn(resp);//对原始数据处理
                treeInst.reload({
                    data:resultObj//将处理后的结果赋值的data[数据源]
                })
            }

        })
        var resultObj=[];
        function fn(jsonData) {
            //取得顶级的数据
            for(var i=0;i<jsonData.length;i++){
                if(jsonData[i].pid==0){
                    resultObj.push(jsonData[i]);
                }
            }
            getChildren(resultObj, jsonData)
        }

        function getChildren(nodeList, jsonData) {
            nodeList.forEach(function(elemet, index) {
                elemet.children = jsonData.filter(function(item, indexI) {
                    return item.pid === elemet.id
                })
                if(elemet.children.length > 0) {
                    getChildren(elemet.children, jsonData)
                }
            })
        }
    })
</script>

</body>
</html>
